



.home {
    position: relative;
    height: 100%;
    min-width:1280px;
}
.page1 {
    width:100%;
    height:955px;
    position:relative;
    background:url('~@/styles/img/banner_01.jpg') no-repeat center top;
    background-size: 100% 100%;
    .menu {
        height: 116px;
        margin: 0 auto;
        width: 1280px;
        box-sizing: border-box;
        padding-top: 4px;
        position: relative;
        z-index: 9999;
        .menu-ul {
            li {
               float: left;
               width: 237px;
               height: 108px;
               margin-left: 6%;
               background: url("~@/styles/img/bg_menu.png") no-repeat center top;
               text-align: center;
               box-sizing: border-box;
               padding-top: 20px;
               
               &:hover{
                    background-position: bottom center;
                    .s1 {
                        top: 30px;
                    }
                    .s2 {
                        bottom: 28px;
                    }
               }
               span {
                   display: block;
                   position: relative;
                   cursor: default;
                   transition: all 0.5s;
               }
               .s1 {
                    line-height: 35px;
                    color: #b5bcd6;
                    font-size: 22px;
                    top: 0;
               }
               .s2{
                    line-height: 24px;
                    font-size: 12px;
                    color: #60647f;
                    bottom: 0;
               }
            }
        }
    }
    .biaoti {
        margin: 0 auto;
        width: 750px;
        margin-top: 150px;
        text-align: center;
        .vintage{
            color: gold;
            letter-spacing: 0;
            margin-bottom: 30px;
            font-size: 32px;
            text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135 
        }
        .miaoshu {
            font-family: Playbold, 'PingFang SC', Arial, "Microsoft YaHei UI", "Microsoft YaHei", serif;
            font-weight: bold;
            span {
                line-height: 40px;
                margin-right: 20px;
                font-size: 20px;
                color: transparent;
                background-color : blue;
                text-shadow : rgba(255,255,255,0.5) 0 5px 6px, rgba(255,255,255,0.2) 1px 3px 3px;
                -webkit-background-clip : text;
            }
        }
    }
    .shuoming{
        margin-top: 100px;
        padding:0 20%;
        color: transparent;
        -webkit-text-stroke: 1px red;
        letter-spacing: 0.04em;
        font-size: 50px;
        text-align: center;
    }
    .tiaodong {
        animation: tiaodong 1.9s linear infinite;
        transition:transform 0.4s linear;
        width: 39px;
        height: 95px;
        background: url('~@/styles/img/icon_mouse.png');
        position: absolute;
        left: calc(50% - 20px);
        bottom: 30px;
        cursor: pointer;
        z-index: 999;
    }
}

.page2 {
    width:100%;
    min-height:655px;
    background:url('~@/styles/img/banner_02.jpg') left top repeat #fff;
    position: relative;
    padding-bottom: 80px;
    // background-size: 100% 100%;
    .main {
        width: 1280px;
        margin: 0 auto;
        padding-top: 20px;
        padding-bottom: 20px;
        position: relative;
        z-index: 999;
        .item-div{
            height: 220px;
            background: #fff;
            box-sizing: border-box;
            padding: 20px;
            margin-bottom: 15px;
            border-radius: 5px;
            font-size: 13px;
            position: relative;
            // background:url('~@/styles/img/news.jpg') left top;
            // background-size: 100% 100%;
            .bbLogo {
                width: 60%;
                height: 100%;
                cursor: pointer;
                border-radius: 5px;
                transition: all 0.3s;
                &:hover {
                    transform: scale(1.1);
                }
            }
            .bb-info {
                width: 40%;
                box-sizing: border-box;
                padding-left: 10px;
                cursor: default;
                .bbgTitle {
                    text-align: center;
                    font-size: 16px;
                    margin-bottom: 5px;
                    font-weight: bold;
                    color: #e20405;
                }
                .bbgSubTitle,.bbgUpDate,.bbgUpDateInfo{
                    font-weight: bold;
                    margin-bottom: 9px;
                    color: #dd3d49;
                }
                .bbgSubTitle{
                    height: 51px;
                }
                .bbgUpDate {
                    color: #eda64e;
                }
                .bbgUpDateInfo {
                    color: #00e0cc;
                }
                .bbgBtnBox {
                    .bbg-btn{
                        display: inline-block;
                        border: 1px solid #333;
                        line-height: 36px;
                        text-align: center;
                        width: 100%;
                        border-radius: 3px;
                        cursor: pointer;
                        transition: all 0.3s;
                        font-size: 14px;
                        &:hover{
                            border-color: #109563;
                            color: #109563;
                        }
                    }
                }
            }
            .bbEngine{
                position: absolute;
                width: 50px;
                right: 0;
                top: 0;
                height: 20px;
                font-weight: bold;
                text-align: center;
                background: #f4b72b;
                color: red;
                border-radius: 0 5px 0 0;
            }
        }
        // .item-div {
        //     width: 426.66px;
        //     float: left;
        //     box-sizing: border-box;
        //     padding: 20px;
        //     .item-bgc {
        //         background: url('~@/styles/img/item-bgc.png/') no-repeat center top;
        //         background-size: 100% 100%;
        //         width: 100%;
        //         height: 426px;
        //         padding-top: 55px;
        //         position: relative;
        //         .bb-div {
        //             box-sizing: border-box;
        //             padding: 0 43px;
        //             padding-left: 45px;
        //             height: 20px;
        //             line-height: 20px;
        //             margin-bottom: 10px;
        //             font-size: 14px;
        //             cursor: default;
        //             font-weight: bold;
        //             .left-span {
        //                 float: left;
        //                 width: 75px;
        //             }
        //             .right-span {
        //                 float: left;
        //                 width: calc(100% - 75px);
        //             }
        //         }
        //         .bbLogo {
        //             display: block;
        //             width: 306.66px;
        //             margin: 0 auto;
        //             height: 230px;
        //             border-radius: 5px;
        //             cursor: pointer;
        //             transition: all 0.6s;
        //             &:hover {
        //                 transform: scale(1.05, 1.05)
        //             }
        //         }
        //         .bbgTitle {
        //             padding: 0 40px;
        //             padding-left: 43px;
        //             text-align: center;
        //             font-size: 18px;
        //             line-height: 50px;
        //             color: #e20405;
        //             font-weight: bold;
        //             span {
        //                 cursor: pointer;
        //                 &:hover{
        //                     text-decoration: underline;
        //                 }
        //             }
        //         }
        //         .bbInfo{
        //             color: #e00dcd;
        //         }
        //         .bbUpdate {
        //             color: #00e0cc;
        //         }
        //         .bbUpdateInfo {
        //             color: #ffff00;
        //         }
        //         .lianxi {
        //             position: absolute;
        //             width: 225px;
        //             height: 50px;
        //             bottom: -6px;
        //             left: 76px;
        //             background: url('~@/styles/img/download-1.png/') no-repeat center top;
        //             cursor: pointer;
        //             &:hover{
        //                 background: url('~@/styles/img/download-2.png/') no-repeat center top; 
        //             }
        //         }
        //     }
        // }
    }
    .bottom {
        position: absolute;
        height: 400px;
        width: 100%;
        background: url("~@/styles/img/bottom.jpg/");
        background-size: 100% 100%;
        bottom: 0;
        left: 0;
    }
}



.foot {
    background: #161b2f;
    color: #fff;
    height: 60px;
    text-align: center;
    padding-top: 20px;
    position: relative;
    z-index: 899999;
    p {
        line-height: 20px;
        a {
            color: #409eff;
            text-decoration: none;
        }
    }
}

#Floatingbar {
    width: 170px;
    position: fixed;
    top: 40%;
    right: 0px;
    margin-top: -122px;
    z-index: 3000;
    li{
        transition: all .5s;
        margin-bottom: 5px;
        span{
            display: block;
            width: 108px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 18px;
            color: #2b2d44;
            padding-right: 50px;
            padding-left: 8px;
            background: url("~@/styles/img/bg_floatingbar.png/") no-repeat left top;
            text-decoration: none;
            cursor: pointer;
        }
        // transition: all 0.5s;
        &:hover{
            margin-left: -15px;
            span{
                color: #ecebf0;
                background-position: left bottom;
            }
        }
    }
}

@keyframes tiaodong {0%{transform:translatey(0px);}50% {transform: translatey(20px);}100% {transform: translatey(0px);}}


.link-span {
    margin-left: 20px;
    font-size: 14px;
    color: red;
    text-decoration: underline;
    cursor: pointer;
    position: relative;
    .coupon-icon {
        width: 40px;
        height: 40px;
        position: absolute;
        top: 10px;
        left: 70px;
    }
}


// 移动端
.not-rulePage {
    font-size: 16px;
    color: #fff;
    box-sizing: border-box;
    padding: 0 20%;
    margin-top: 10vh;
}
.mobile-page {
    min-height: 100vh;
    background: #fff;
    font-weight: bold;
    padding-top: 20px;
    .search-div {
        padding: 0 10px;
        margin-bottom: 10px;
        &.checkbox{
            text-align: right;
            padding-right: 15px;
        }
        .search-input {
            width: calc(100% - 68px);
            margin-right: 10px;
        }
       
    }

    .content {
        height: calc(100vh - 78px);
        overflow-y: auto;
        overflow-x: hidden;
        padding-bottom: 10px;
        /deep/ .el-collapse{
            .el-collapse-item__header,
            .el-collapse-item__content {
                padding: 0 10px;
            }
            .el-collapse-item__content {
                padding-bottom: 10px;
                padding-left: 15px;
            }
            .el-collapse-item__arrow {
                color: red;
                font-weight: bold;
            }
        }
        .mobile-title {
            display: inline-block;
            width: 80%;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
            color: red;
            font-weight: bold;
        }
        .bbUpdate {
            color:green;
        }
        .bbSize {
            color: #eda64e;
        }
        .bbDesc {
            color: #409EFF;
            text-decoration: underline;
        }
        .bbUpdateInfo {
            color: #C2673A;
        }
        .not-data {
            /deep/ .el-collapse-item__arrow{
                display: none;
            }
            .not-data-title {
                width: 100%;
                text-align: center;
            }
        }
    }
}